<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.imga{
				animation: dfc .8s linear infinite;
				width: 500px;
				height: 500px;
			}
			.imgb{
				animation: dfc .8s linear infinite;
				width: 500px;
				height: 500px;
			}
			/*关键帧*/
			@keyframes dfc{
				0%{
					transform: translateY(50px) rotateY(180deg);
				}
				25%{
					transform: translateY(0px) rotateY(540deg);
				}
				50%{
					transform: translateY(50px) rotateY(900deg);
				}
				75%{
					transform: translateY(0px) rotateY(1260deg);
				}
				100%{
					transform: translateY(50px) rotateY(1620deg);
				}
			}
			@keyframes dfc1{
				0%{
					transform: rotateY(180deg);
				}
				25%{
					transform: rotateY(540deg);
				}
				50%{
					transform: rotateY(900deg);
				}
				75%{
					transform: rotateY(1260deg);
				}
				100%{
					transform: rotateY(1620deg);
				}
			}	
		</style>
	</head>
	<body>
		<img src="../img/oiiai.jpg" alt="" />
		<aud  io src="" autoplay></audio>
		<button id="btn1">开转</button>
		<button id="btn2">暂停</button>
		<button id="btn3">翻转</button>
		<script>
			//点击  开转  图片切换并且添加样式  .imga
			$("#btn1").click(function(){
				$("img").attr("src","../img/51121.jpg").addClass("imga")
			});
			//暂停  音乐消失+动画效果消失
			$("#btn2").click(function(){
				$("audio").removeAttr("src")
				$("img").removeClass("imga")
				$("img").attr("src","../img/oiiai.jpg")
			});
			//翻转  切换 ：imga 切换 imgb
			$("#btn3").click(function(){
				$("img").toggleClass("imgb")
				$("audio").attr("src")
			});
		</script>
	</body>
</html>